<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript " th:src="@{../js/jquery-1.11.1-min.js}"></script>
    <script type="text/javascript" th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
    <link th:href="@{../bootstrap/css/bootstrap.min.css}" type="text/css" rel="stylesheet"/>
    <link th:href="@{../css/wangEditor.css}" rel="stylesheet">
    <!--<script th:src="@{../js/wangEditor.js}"></script>-->
    <link th:href="@{../css/wangEditor2.min.css}" rel="stylesheet">
    <script th:src="@{../js/wangEditor2.min.js}"></script>
    <link th:href="@{../css/css-1.css}">
    <script th:src="@{../js/wangEditor3.min.js}"></script>
</head>
<body style="background-color: #eeeeee">

<nav class="navbar navbar-default color" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand">BBS</a>
        </div>

        <div class="col-lg-6">
            <ul class="nav navbar-nav">
                <li><a href="../user/main">首页</a></li>
                <li><a href="../question.html">问答</a></li>
                <li><a href="../help.html">帮助中心</a></li>
                <li><a href="../mine.html">我的</a></li>
                <li>
                    <form class="form-inline" style="margin-top:8px ">
                        <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                    </form>
                </li>
            </ul>
        </div>

        <div class="col-lg-2 col-lg-offset-2" style="width: 20%;overflow: hidden">
            <ul class="nav navbar-nav">
                <li th:if="*{session.user.name != null}"><a th:text="'欢迎你,'+ *{session.user.name}"
                                                            style="color: red"></a></li>
                <li ><a  href="javascript:void(0)" class="logoutBtn" >注销</a></li>
            </ul>
        </div>
    </div>

</nav>


<div class="container" style=" padding-right:0px;background-color: #ffffff;border-radius: 15px;margin-bottom: 50px ">
    <div class="col-lg-9" style="border-bottom: 5px solid #eeeeee;padding: 10px;border-right: 5px solid #eeeeee;padding: 10px">
        <div style="padding: 10px;min-height: 350px">
            <div style="height: 40px"></div>
            <div class="title">
                <span th:text="${topic.title}"></span>
                <input type="hidden" id="hidden-topicId" th:value="${topic.id}">
                    <span  th:if="${topic.status == '10'||topic.status == '11'}" class="top">置顶</span>
                    <span th:if="${topic.status == '01'||topic.status == '11'}" class="essence">精华</span>
            </div>
            <div class="topicInfo">
                <span th:text="${topic.createTime}"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span th:text="共有+${topic.browseCount}+次浏览"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span th:text="共有+${topic.commentCount}+个评论"></span>
            </div>
            <div class="topic-content" th:utext="${topic.content}">
            </div>
        </div>
        <div class="col-md-6">

                <button  th:if="${#strings.contains(topic.collectionId,session.user.id)}" type="button" id = "uncollection" style="float: right" class="thumb-btn">
                   已收藏
                </button>

                <button th:if="${!#strings.contains(topic.collectionId,session.user.id)}" type="button" id = "collection" style="float: right" class=" thumb-btn">
                    收藏
                </button>

        </div>
        <div class="col-md-6">
<!--            <span class="log-user">[[*{session.user.id}]]</span>-->
<!--            <span class="log-user">userid:[[${user.id}]]</span>-->
<!--            <span th:text="'thumbid:'+${topic.thumbsId}"></span>-->
            <button th:if="${#strings.contains(topic.thumbsId,session.user.id)}" type="button" id = "unthumb" style="float: left" class=" thumb-btn">
                已点赞
            </button>

            <button th:if="${!#strings.contains(topic.thumbsId,session.user.id)}" type="button" id = "thumb" style="float: left" class=" thumb-btn">
                点赞
            </button>

        </div>

    </div>
    <div class="col-lg-3 user-info" style="height: 300px; border-bottom: 5px #eeeeee solid">
        <div style="text-align: center;padding: 20px">
            <a href="#"><img class="img-circle" style="height: 70px;margin: 20px"
                             th:src="${user.profilePhoto}"> </a>
            <h4 th:text="${user.name}"></h4>
            <ul class="user-info">
                <li>
                    <!--点击跳转帖子所属用户的全部帖子列表-->
                    <a class="btn" th:href="@{'/user/myPushTopic?userId='+${user.id}}">
                        <span class="span-1" style=" font-size: 16px;font-weight: 600;color: #4E5969;" th:text="${topicCount}"></span>
                        <span class="span-2" style="   font-size: 12px; color: #86909C;display: block;text-align: center;">帖子</span>
                    </a>
                </li>
                <li>
                    <a class="btn" href="#">
                        <span class="span-1" style=" font-size: 16px;font-weight: 600;color: #4E5969;" th:text="${collectionCount}"></span>
                        <span class="span-2" style="   font-size: 12px; color: #86909C;display: block;text-align: center;">收藏</span>
                    </a>
                </li>
                <li>
                    <a class="btn" href="#">
                        <span class="span-1" style=" font-size: 16px;font-weight: 600;color: #4E5969;" th:text="${thumbCount}"></span>
                        <span class="span-2" style="   font-size: 12px; color: #86909C;display: block;text-align: center;">点赞</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="col-lg-9" style="border-bottom: 5px solid #eeeeee;padding: 10px;border-right: 5px solid #eeeeee;padding: 10px">
        <div class="col-md-12" style="margin-top: 10px;">
            <div th:each="commentUser:${commentUserMap}"  >
                <div class="media-left">
                    <a href="#">
                        <img width="60px" class="media-object img-circle picset" th:src="${commentUser.value.profilePhoto}">
                    </a>
                </div>
                <div class="media-body ">
                    <div style="color:#C9CDD4; margin-bottom: 10px">
                        <span th:text="${commentUser.value.name}"></span>
                        <span style="margin: 5px;display: inline-block;color: #e2b46e;background-color:#f8e7c4;">白金会员</span>
                        <span th:text="${commentUser.key.createTime}"></span>
                    </div>
                    <div th:utext="${commentUser.key.content}" class="topic-content" style="padding:5px;margin: 0px 50px 0 0;font-size: 15px;line-height: 28px;font-weight: normal;text-decoration: none;">

                    </div>
                </div>
                <hr>
        </div>
        </div>

</div>
    <div class="col-lg-9" style="border-bottom: 5px solid #eeeeee;padding: 10px;border-right: 5px solid #eeeeee;padding: 10px">
        <div class="col-lg-12 form-group" style="margin-top: 10px">
            <div id="editor"></div>
        </div>
        <div class="form-group col-lg-12" style="padding: 20px">
            <div class="col-lg-offset-11 col-lg-1">
                <button type="submit" id="releaseBtn" class="btn btn-default btn-primary">发布</button>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" th:inline="javascript">
    $(function (){
        $("#releaseBtn").click(function (){
            releaseComment();
        })
        $("#thumb").click(function (){
            thumb();
        })
        $("#collection").click(function (){
            collection();
        })
        $("#unthumb").click(function (){
            unthumb();
        })
        $("#uncollection").click(function (){
            uncollection();
        })
    })
</script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    // editor.config.height = 100
    editor.create()
    this.editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ]


    function releaseComment(){
        let commentContent = editor.txt.html();
        let topicId = $("#hidden-topicId").val();
        if (commentContent == ""){
            $.alert("内容不能为空");
            return;
        }

        $.ajax({
            url:"/comment/releaseComment",
            data:{
                "commentContent":commentContent,
                "topicId":topicId
            },
            type:"post",
            dataType:"json",
            success: function (data) {
                if(data.success){
                    alert("发表成功")
                    location.reload();
                }else {
                    alert("发表失败")
                }
            }
        })
    }
    function thumb(){
        let topicId = $("#hidden-topicId").val();
        $.ajax({
            url:"thumb",
            data:{
                "topicId":topicId
            },
            type:"post",
            dataType:"json",
            success: function (data) {
                if(data.success){
                    location.reload();
                }else {
                    alert("点赞失败")
                }
            }
        })
    }function collection(){
        let topicId = $("#hidden-topicId").val();
        $.ajax({
            url:"collection",
            data:{
                "topicId":topicId
            },
            type:"post",
            dataType:"json",
            success: function (data) {
                if(data.success){
                    location.reload();
                }else {
                    alert("收藏失败")
                }
            }
        })
    }
    function unthumb(){
        let topicId = $("#hidden-topicId").val();
        $.ajax({
            url:"unthumb",
            data:{
                "topicId":topicId
            },
            type:"post",
            dataType:"json",
            success: function (data) {
                if(data.success){
                    location.reload();
                }else {
                    alert("取消点赞失败")
                }
            }
        })
    }function uncollection(){
        let topicId = $("#hidden-topicId").val();
        $.ajax({
            url:"uncollection",
            data:{
                "topicId":topicId
            },
            type:"post",
            dataType:"json",
            success: function (data) {
                if(data.success){
                    location.reload();
                }else {
                    alert("取消收藏失败")
                }
            }
        })
    }


    $(function () {

        $(".logoutBtn").click(function () {
            $.ajax({
                url: "../user/logout",
                type: "get",
                dataType: "json",
                success: function (data) {
                    if (data.success) {
                        window.location.href = "login.html"
                    } else {
                        $.alert("注销失败")
                    }
                }
            })
        })
    })

</script>

<style>
    .essence {
        display: inline-block;
        vertical-align: middle;
        padding: 3px 4px;
        margin-right: 1px;
        font-size: 15px;
        line-height: 15px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        color: #fff;
        background-color: #F76560;
        position: relative;
        top: -1px;
    }

    .top {
        display: inline-block;
        vertical-align: middle;
        padding: 3px 4px;
        margin-right: 1px;
        font-size: 15px;
        line-height: 15px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        color: #fff;
        background-color: #57A9FB;
        position: relative;
        top: -1px;
    }

    .title {
        color: #1D2129;
        font-size: 24px;
        border: none;
        line-height: 34px;
        margin: 9px 0 18px 0;
    }

    .topicInfo {
        color: #A9AEB8;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .user-info ul {
        list-style: none;
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 15px 0 18px 0;
        border-top: 1px solid #F2F3F5;
        margin-top: 20px;
    }
    .user-info ul li{
        float: left;width: 33%;
    }
    .user-info ul li span-1{

    }
    .user-info ul li span-2{
        font-size: 12px;
        color: #86909C;     display: block;
        text-align: center;
    }
    .thumb-btn {
        position: relative;
        color: #fff;
        background: #20a0ff;
        border: 1px solid #20a0ff;
        outline: none;
        display: inline-block;
        padding-left: 25px;
        padding-right: 25px;
        font-size: 18px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        border-radius: 3px 0px 0px 3px;
        margin: 0;
        text-decoration: none;
    }

    .comment-list {
        padding: 15px 0 5px 77px;
        border-bottom: 1px solid #F2F3F5;
    }
    .essence{
        display: inline-block;
        vertical-align: middle;
        padding: 3px 4px;
        margin-right: 1px;
        font-size: 15px;
        line-height: 15px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        color: #fff;
        background-color: #F76560;
        position: relative;
        top: -1px;
    }
    .top{
        display: inline-block;
        vertical-align: middle;
        padding: 3px 4px;
        margin-right: 1px;
        font-size: 15px;
        line-height: 15px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        color: #fff;
        background-color: #57A9FB;
        position: relative;
        top: -1px;
        max-height: 100px;
    }
    .topic-content img{
        max-width: 600px !important;
    }

</style>
</html>